<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8">
    <title>Dijit CheckBox Tree and File Store</title>     
    <!--   
      Load the CSS files including the Apache style icons, alternatively load fileIconsMS.css 
      instead to get Microsoft Windows style icons (but not both).
    -->
    <style type="text/css">
      @import "../../dijit/themes/claro/claro.css";
      @import "../../dijit/themes/claro/document.css";
      @import "../../dijit/tests/css/dijitTests.css";
      @import "../themes/claro/claro.css";
      @import "../icons/fileIconsApache.css";
    </style>

    <script type="text/javascript">
      var dojoConfig = {
            async: true,
            parseOnLoad: true,
            isDebug: true,
            baseUrl: "../../",
            packages: [
              { name: "dojo",  location: "dojo" },
              { name: "dijit", location: "dijit" },
              { name: "cbtree",location: "cbtree" }
            ]
      };
    </script>

    <script type="text/javascript" src="../../dojo/dojo.js"></script> 
    <script type="text/javascript">
      require([
        "dojo/ready",
        "cbtree/Tree",                  // Checkbox tree
        "cbtree/TreeStyling",           // Checkbox tree Styling
        "cbtree/models/FileStoreModel", // FileStoreModel
        "cbtree/stores/FileStore"
        ], function( ready, Tree, TreeStyling, FileStoreModel, FileStore) {

          // Because of the generic nature of this demo it has no knowledge of the file system layout
          // under the DOCUMENT_ROOT, therefore the 'basePath' is set to the document root itself.
          // The option 'iconClass' forces the server side application to include the icon classname
          // in the response.
          var store = new FileStore( { url: "../stores/server/php/cbtreeFileStore.php", 
                                        basePath:"./",
                                        options:["iconClass"] } ); 

          // Tell the model to look for the store item property 'icon' and process it as an icon.
          var model = new FileStoreModel( {
                  store: store,
                  rootLabel: 'My HTTP Document Root',
                  checkedRoot: true,
                  checkedStrict: false,
                  iconAttr: "icon",
                  queryOptions: {ignoreCase:true},
                  sort: [{attribute:"directory", descending:true},{attribute:"name"}]
               }); 

          ready(function() {
            // Create the tree and set the icon property so the tree root uses the same set of icons
            // all tree nodes will use (not required but for consistancy only).
            var tree = new Tree( { model: model, id: "MenuTree",
                                    icon: {iconClass:"fileIcon"}
                                  }, "CheckboxTree" );
            tree.startup();
          });

        });
    </script>
  </head>
    
  <body class="claro">
    <h1 class="DemoTitle">Dijit CheckBox Tree with a File Store and Fancy Icons</h1>
    <p>
      This CheckBox Tree uses the cbtreeFileStore and the assciated PHP server side application to browse the document root 
      of your HTTP server. This example uses lazy loading, that is, the files are only fetched when 
      needed. In addition Apache style icons are used to decorate the tree nodes, a set of Microsoft Windows icons is also
      available.
    </p>
    <p>
      The HTTP server running this demo MUST have PHP support enabled and provide PHP support for JSON. 
    </p>
    <div id="CheckboxTree">  
    </div>
  </body> 
</html>